<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>灵犀详细信息</title>
    <script src="javascript/jquery.min.js"></script>
    <script src="javascript/function.js"></script>
    <link rel="stylesheet" href="stylesheet/style_v1.1.css">
         <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
             <style>
        .model-ly img{
            width: 100%;
        }
    </style>
</head>
<body>
<div class="con fenxiang" style="background-color: #000000;position: fixed;top: 0px;left: 0px;z-index: 11211111;opacity: 0.8;">
    <img src="image/k2.png" alt="" style="width: 100%">
</div>
<div class="header-title">
    <a href="javascript:void(0);" class="fanhui">
        <img src="image/tick.png" alt="">
    </a>
    <p>灵犀详细信息</p>
</div>
<div class="con padding-top50 padding-bottom50">
    <div class="pjq" id="tagWall">
        <!--<img src="image/xxq.jpg" alt="">-->
    </div>
    <div class="work-ms">
        <p class="name" id="name"></p>
         <p class="name" id="username"></p>
        <p class="shuoming" id="content"></p>
        <p class="jindu" id="statusContent"></p>
        <div class="jindu-img">
            <div class="jindu-t">
                <div class="jindu-t-img" style="padding-top: 5px;">
                    <img src="image/y.png" alt="">
                </div>
            </div>
            <div class="jindu-t">
                <div class="jindu-t-img" id="status_ing" style="padding-top: 5px;"> 
<!--                     <img src="image/y.png" alt=""> -->
                </div>
            </div>
            <div class="jindu-t">
                <div class="jindu-t-img"  id="status_done" style="padding-top: 5px;">
                </div>
            </div>
            <div class="jindu-h">
            </div>
        </div>
    </div>
<!--     <div class="work-sm"> -->
<!--         <p><span>灵犀说明：</span><span id="des"></span></p> -->
<!--     </div> -->
    <div class="work-find-list" id="userImgShow">
    </div>
</div>
<div class="model hide">
    <div class="model-con">
        <p class="model-name" id="username"></p>
        <span class="model-ly" id="message">
          <img src="" alt="" id="messageImg">
        </span>
    </div>
    <div class="model-btn">
        <a href="javascript:void(0);">确定</a>
    </div>
</div>
<div class="footer" id="showMeun">
    <ul class="work-goumai">
        <li><a href="javascript:void(0);" class="zz" onclick="cliffordToPay();">灵犀一下(支付)</a></li>
        <li><a href="forwardPage_index.action" class="qf">发起灵犀月饼</a></li>
    </ul>
</div>
<script>
var config='<%=request.getParameter("parms.config")%>';
var goodsId;
var cliffordId;
var tag;
var cliffordFor="";
var count=0;
var strs= new Array(); //定义一数组 
strs=config.split("_"); //字符分割 
if (strs.length==3) 
{ 
	goodsId=strs[0];
	cliffordId=strs[1];
	tag=strs[2];
} else{
	alert("未获取到正确的灵犀记录，请重新进入页面");
}
    $(function () {
    	
    	  $('.fenxiang').height($(window).innerHeight()+"px");
    	  if(tag=="1"){
    		  $('.fenxiang').show();
    	  }else if(tag=="2"){
    		  $('.fenxiang').hide();
//     		  $('#showMeun').hide();
    		  var url=window.location.href;
     	 	 if(url.indexOf("page") > 0 || url.indexOf("code") > 0 || url.indexOf("state") > 0 )
     	 	{
     	 		window.location.href="forwardPageParam_cliffordUserList.action?parms.config="+goodsId+"_"+cliffordId+"_"+tag;
     	 	}
    	  }else{
    	 	  $('.fenxiang').hide();
    	 	  var url=window.location.href;
    	 	 if(url.indexOf("from") > 0 || url.indexOf("isappinstalled") > 0 )
    	 	{
    	 		window.location.href="forwardPageParam_cliffordUserList.action?parms.config="+goodsId+"_"+cliffordId+"_"+tag;
    	 	}
    	  }
    		  
        $('.model').addClass('hide');
        $('.model-btn').on('click',function(e){
            e.preventDefault();
            $('.model').addClass('hide');
        });
        configWeiXin();
       queryCliffordDetail();
    });
    function queryCliffordDetail(){
    	var params = "parms.cliffordId=" + cliffordId;
    	params += "&parms.openId=" + "1";
    	
    	$.ajax({
    				type : 'post',
    				url : 'cliffordAction!queryCliffordReocrdListByOpenId.action',
    				async : false,
   					data : params, // 传给action的参数
    				success : function(data) {
    					var html='<img src="image/y.png" alt="">';
    					var wallhtml='<img src="image/messagebc.jpg" alt="">';
    					if (data.result == 1) {
    						if (data.resultData.dataBeansize == '1') {
    							var bean= data.resultData.dataBean;
//     							cliffordFor=bean[0].cliffordForWhom;
    							
//     							 configWeiXin();
    							 
    							 $("#username").text("灵犀人："+data.resultData.dataBeanUser.userName);
								$("#name").text(bean.goodsName);
    							$("#content").text(bean.goodsDes);
    							count=bean.cliffordNeedNumber;
    							$("#statusContent").text("共获得"+bean.cliffordDidNumber+"份，距离成功还差"+bean.cliffordNeedNumber+"份");
    							$("#des").text(bean.goodsDetails);
    							if(bean.cliffordState=="1"){//1   正在祈福；2     祈福完成；
    								document.getElementById("status_ing").innerHTML = html;
    							}else if(bean.cliffordState=="2"){
    								document.getElementById("status_ing").innerHTML = html;
    								document.getElementById("status_done").innerHTML = html;
    							}
    							if (data.resultData.size == '0') {
        							document.getElementById("userImgShow").innerHTML = "";
        							document.getElementById("tagWall").innerHTML =wallhtml;
        						}else{
        							var list = data.resultData.datalist;
        							var htmlUser = "";
        							var htmlWall = "";
        							for ( var i = 0; i < list.length; i++) {
        								htmlUser += '  <div class="touxiang" style=" width: 25%;">';
        								htmlUser += '  <input style="display:none;" value="'+list[i].zjfUser.userName+'"</input>';
        								htmlUser += '  <input style="display:none;" value="'+list[i].zjfClifford.tag_content+'"</input>';
        								htmlUser += '  <input style="display:none;" value="'+list[i].zjfBlessingLanguage.blessImg+'"</input>';
        								htmlUser += '   <img src="'+list[i].zjfUser.userWebcahtHeadurl+'" alt="">';
        								htmlUser += '  </div>';
        								
        								htmlWall += ' <div class="col-4">';
        								htmlWall += '<img src="'+list[i].zjfLabel.labelImg+'" alt="">';
        								htmlWall += '</div>';
        							}
        							if(list.length<18){
        								for(var j=0;j<(18-list.length);j++){
        									htmlWall += ' <div class="col-4">';
            								htmlWall += '<img src="image/pjbg.jpg" alt="">';
            								htmlWall += '</div>';
        								}
        							}
        							document.getElementById("tagWall").innerHTML = htmlWall;
        							document.getElementById("userImgShow").innerHTML = htmlUser;
        						    $('.work-find-list').find('div.touxiang').on('click', function () {
        						    	$("#username").text($(this).find("input:eq(0)").val());
//         						    	$("#message").text( $(this).find("input:eq(1)").val());
        						     	$("#messageImg").attr('src',$(this).find("input:eq(2)").val());
        					            $('.model').removeClass('hide');
        					        });
        						}
    							
    						} else {
    							alert("灵犀商品信息不正确，请联系客服人员");
    							document.getElementById("userImgShow").innerHTML = "";
    							document.getElementById("tagWall").innerHTML =wallhtml;
    						}
    					} else {
    						alert(data.msg);
    						document.getElementById("userImgShow").innerHTML = "";
    						document.getElementById("tagWall").innerHTML =wallhtml;
    					}
    				}
    			});
    }
    //配置微信
    function configWeiXin(){
//     	if(cliffordFor==""){
//     		alert("未获取到正确的祈福信息，请刷新页面");
//     		return;
//     	}
    	var params = "parms.url="+encodeURI(window.location.href);
 		$.ajax({
 					type : 'post',
 					url : 'cliffordAction!makeWeixinConfig.action',
 					async : false,
 					data : params, // 传给action的参数
 					success : function(data) {
 						if(data.msg=="true"){
			    			wx.config({
			    			    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
// 	 			    			debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			    			    appId: data.resultData.config.weixin_appId, // 必填，公众号的唯一标识
			    			    timestamp: data.resultData.config.timestamp, // 必填，生成签名的时间戳
			    			    nonceStr: data.resultData.config.nonceStr, // 必填，生成签名的随机串
			    			    signature: data.resultData.config.signature,// 必填，签名，见附录1
			    			    jsApiList: ['chooseWXPay','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
			    			});
			    			wx.ready(function(){
// 			    				alert("准备Ok");.
			    				var desc_temp="月近中秋，想起你；你是我的谁，灵犀一下，马上知道!";
// 			    				var desc_temp="我为"+cliffordFor+"发起了祈福，为他灵犀一下吧!";
			    				 var oUrl = window.location.href.toString();
			    				 var re=eval('/(config=)([^&]*)/gi');
			    				 var share_url = oUrl.replace(re,'config='+goodsId+'_'+cliffordId+'_0');
//			    				alert(share_url);
								var title_temp="灵犀月饼，最酷炫的中秋游戏！";
// 								var title_temp="我为"+cliffordFor+"发起了祈福，为他灵犀一下吧!";
								var strlogo="http://test.zhongjufu123.com/zjfljkj_wechat/image/logo.jpg";
								 wx.onMenuShareAppMessage({
			    					 title: title_temp, // 分享标题
			    				     desc: desc_temp, // 分享描述
			    				     link: share_url, // 分享链接
			    				     imgUrl: strlogo, // 分享图标
			    				     type: 'link', // 分享类型,music、video或link，不填默认为link
			    				     dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
			    				     success: function () { 
			    				         // 用户确认分享后执行的回调函数
			    					        cliffordToMyList();
// 			    					    	 alert('已分享');
			    				     },
			    				     cancel: function () { 
			    				         // 用户取消分享后执行的回调函数
			    				     	 alert("已取消分享!");
			    				     }
			    				});
								 wx.onMenuShareTimeline({
			    					  title: title_temp, // 分享标题
			    					  link: share_url, // 分享链接
			    				      imgUrl: strlogo,
			    				      success: function (res) {
			    					        cliffordToMyList();
//			    					    	 alert('已分享');
			    				      },
			    				      cancel: function (res) {
			    				        alert('已取消分享!');
			    				      },
			    				      fail: function (res) {
			    				        alert("分享失败，"+JSON.stringify(res));
			    				      }
			    				    });
								 wx.onMenuShareQQ({
			    					    title: title_temp, // 分享标题
			    					    desc: desc_temp, // 分享描述
			    					    link: share_url, // 分享链接
			    					    imgUrl: strlogo, // 分享图标
			    					    success: function (res) { 
			    					       // 用户确认分享后执行的回调函数
			    					        cliffordToMyList();
// 			    					    	 alert('已分享');
			    					    },
			    					    cancel: function (res) { 
			    					       // 用户取消分享后执行的回调函数
			    					    	 alert('已取消分享!');
			    					    }
			    					});
								 wx.onMenuShareWeibo({
			    					    title: title_temp, // 分享标题
			    					    desc: desc_temp, // 分享描述
			    					    link: share_url, // 分享链接
			    					    imgUrl: strlogo, // 分享图标
			    					    success: function (res) { 
			    					       // 用户确认分享后执行的回调函数
			    					        cliffordToMyList();
// 			    					    	 alert('已分享');
			    					    },
			    					    cancel: function (res) { 
			    					       // 用户取消分享后执行的回调函数
			    					    	 alert('已取消分享!');
			    					    }
			    					});
								 wx.onMenuShareQZone({
			    					    title: title_temp, // 分享标题
			    					    desc: desc_temp, // 分享描述
			    					    link: share_url, // 分享链接
			    					    imgUrl: strlogo, // 分享图标
			    					    success: function (res) { 
			    					       // 用户确认分享后执行的回调函数
			    					        cliffordToMyList();
// 			    					    	 alert('已分享');
			    					    },
			    					    cancel: function (res) { 
			    					       // 用户取消分享后执行的回调函数
			    					    	 alert('已取消分享!');
			    					    }
			    					});
			    			});
// 			    			wx.error(function(res){
// // 			    				alert("config err"+res);
// 			    			    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

// 			    			});
// 			    			wx.success(function(res){
// // 			    				alert("config success"+res);
// 			    			    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
// 			    			});
 						}else{
			    			alert(data.msg);
			    		}
 					}
 				});
    }
   function cliffordToPay(){
// 	   if(count<=0){
// 		   alert("该祈福已满");
// 		   return;
// 	   }
		window.location.href="forwardPageParam_cliffordToPay.action?parms.cliffordId="+cliffordId;
   }
   function cliffordToMyList(){
		window.location.href="forwardPage_cliffordListShow.action";
  }
</script>
</body>
</html>